<!--
 * @Author: 张卓南
 * @Date: 2023-10-21 17:29:55
 * @LastEditTime: 2023-10-21 17:30:41
 * @Description: 
-->

<template>
  <div class="mainc">
    <div class="touxc">
      <div class="toux">
        <van-image round width="5rem" height="5rem" :src="touxiang" />
      </div>
      <div class="info">
        <div>{{ name }}</div>
        <div>{{ hidemobileNum }}</div>
      </div>
    </div>
    <van-toast id="van-toast" />
  </div>
</template>

<script setup lang="ts">
import touxiang from "../../assets/头像.png";
import { ref, onMounted, reactive, computed } from "vue";
const name = ref("");
const mobileNum = ref("");

onMounted(() => {
  let userInfo: any = JSON.parse(localStorage.getItem("userInfo") || "");
  name.value = userInfo?.loginName;
  mobileNum.value = userInfo?.mobileNum;
});

const hidemobileNum = computed(() => {
  let str = "";
  let list = (mobileNum.value + "").split("");
  for (let i = 0; i < list.length; i++) {
    if (i > 2 && i < 7) {
      str += "*";
    } else {
      str += list[i];
    }
  }
  return str;
});
</script>

<style scoped lang="less">
.touxc {
  display: flex;
  padding: 16px;
  background: rgb(4, 174, 211);
}
.info {
  color: rgb(3, 39, 48);
  font-family: Inter;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0%;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin-left: 16px;
}
.ccc {

}
</style>
